<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<base href="/">
<head th:replace="fragment/head ::head"></head>
<body>
<div th:replace="TOP::Top"></div>  <!-- 顶部菜单 -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<div th:replace="LeftSide::side"></div>  <!--  左侧菜单  -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- 主要部分开始 -->
<div class="content">
    <!-- START CONTAINER -->
    <div class="container-widget">
        <!-- Start Top Stats -->
        <!-- End Top Stats -->
        <div th:replace="fragment/ColourfulTables :: ColourfulTables"></div>  <!-- 彩色的进度条  -->
<!--        <div th:replace="fragment/FirstRow :: FirstRow"></div>  &lt;!&ndash; 第一部分&ndash;&gt;-->

        <div th:replace="fragment/SecondRow :: SecondRow"></div>  <!-- 第二部分 -->

<!--        <div th:replace="fragment/calendar :: calendar"></div>-->

<!--        <div th:replace="fragment/ThirdRow :: ThirdRow"></div>  &lt;!&ndash; 第三部分 &ndash;&gt;-->
<!--        <div th:replace="fragment/ForthRow :: ForthRow"></div>  &lt;!&ndash; 第四部分 &ndash;&gt;-->
<!--        <div th:replace="fragment/FifthRow :: FifthRow"></div>  &lt;!&ndash; 第五部分 &ndash;&gt;-->
    </div>
    <!-- END CONTAINER -->
</div>
<!-- 主要部分结束 -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<div th:replace="fragment/SidePanel :: SidePanel"></div>  <!-- 侧面菜单栏 -->
<div th:replace="fragment/Footer :: Footer"></div>  <!-- 页脚 -->
<!-- ================================================
jQuery Library
================================================ -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- ================================================
Bootstrap Core JavaScript File
================================================ -->
<script src="js/bootstrap/bootstrap.min.js"></script>

<!-- ================================================
Plugin.js - Some Specific JS codes for Plugin Settings
================================================ -->
<script type="text/javascript" src="js/plugins.js"></script>

<!-- ================================================
Bootstrap Select
================================================ -->
<script type="text/javascript" src="js/bootstrap-select/bootstrap-select.js"></script>

<!-- ================================================
Bootstrap Toggle
================================================ -->
<script type="text/javascript" src="js/bootstrap-toggle/bootstrap-toggle.min.js"></script>

<!-- ================================================
Bootstrap WYSIHTML5
================================================ -->
<!-- main file -->
<script type="text/javascript" src="js/bootstrap-wysihtml5/wysihtml5-0.3.0.min.js"></script>
<!-- bootstrap file -->
<script type="text/javascript" src="js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>

<!-- ================================================
Summernote
================================================ -->
<script type="text/javascript" src="js/summernote/summernote.min.js"></script>

<!-- ================================================
Flot Chart
================================================ -->
<!-- main file -->
<script type="text/javascript" src="js/flot-chart/flot-chart.js"></script>
<!-- time.js -->
<script type="text/javascript" src="js/flot-chart/flot-chart-time.js"></script>
<!-- stack.js -->
<script type="text/javascript" src="js/flot-chart/flot-chart-stack.js"></script>
<!-- pie.js -->
<script type="text/javascript" src="js/flot-chart/flot-chart-pie.js"></script>
<!-- demo codes -->
<script type="text/javascript" src="js/flot-chart/flot-chart-plugin.js"></script>

<!-- ================================================
Chartist
================================================ -->
<!-- main file -->
<script type="text/javascript" src="js/chartist/chartist.js"></script>
<!-- demo codes -->
<script type="text/javascript" src="js/chartist/chartist-plugin.js"></script>

<!-- ================================================
Easy Pie Chart
================================================ -->
<!-- main file -->
<script type="text/javascript" src="js/easypiechart/easypiechart.js"></script>
<!-- demo codes -->
<script type="text/javascript" src="js/easypiechart/easypiechart-plugin.js"></script>

<!-- ================================================
Sparkline
================================================ -->
<!-- main file -->
<script type="text/javascript" src="js/sparkline/sparkline.js"></script>
<!-- demo codes -->
<script type="text/javascript" src="js/sparkline/sparkline-plugin.js"></script>

<!-- ================================================
Rickshaw
================================================ -->
<!-- d3 -->
<script src="js/rickshaw/d3.v3.js"></script>
<!-- main file -->
<script src="js/rickshaw/rickshaw.js"></script>
<!-- demo codes -->
<script src="js/rickshaw/rickshaw-plugin.js"></script>

<!-- ================================================
Data Tables
================================================ -->
<script src="js/datatables/datatables.min.js"></script>

<!-- ================================================
Sweet Alert
================================================ -->
<script src="js/sweet-alert/sweet-alert.min.js"></script>

<!-- ================================================
Modern Alert
================================================ -->
<script src="js/Modern-alert/main.js"></script>

<!-- ================================================
Gmaps
================================================ -->
<!---<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps/gmaps.js"></script>
<script src="js/gmaps/gmaps-plugin.js"></script>--->

<!-- ================================================
jQuery UI
================================================ -->
<script type="text/javascript" src="js/jquery-ui/jquery-ui.min.js"></script>

<!-- ================================================
Moment.js
================================================ -->
<script type="text/javascript" src="js/moment/moment.min.js"></script>

<!-- ================================================
Full Calendar
================================================ -->
<script type="text/javascript" src="js/full-calendar/fullcalendar.js"></script>

<!-- ================================================
Bootstrap Date Range Picker
================================================ -->
<script type="text/javascript" src="js/date-range-picker/daterangepicker.js"></script>

<!-- ================================================
Below codes are only for index widgets
================================================ -->
<!-- Today Sales -->
<script>

    // set up our data series with 50 random data points

    var seriesData = [[], [], []];
    var random = new Rickshaw.Fixtures.RandomData(20);

    for (var i = 0; i < 110; i++) {
        random.addData(seriesData);
    }

    // instantiate our graph!

    /* ======================================================================
    TIME SCALE
    ====================================================================== */
    var seriesData = [[], [], []];
    var random = new Rickshaw.Fixtures.RandomData(1540000);

    for (var i = 0; i < 200; i++) {
        random.addData(seriesData);
    }

    var graph = new Rickshaw.Graph({
        element: document.getElementById("rickshaw-timescale"),
        renderer: 'area',
        series: [
            {
                color: "#3f51b5",
                data: seriesData[0],
                name: 'Technology'
            },

            {
                color: "#7183e8",
                data: seriesData[1],
                name: 'Creative'
            },

            {
                color: "#aab6fc",
                data: seriesData[2],
                name: 'Ecommerce'
            }
        ]
    });

    graph.render();

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
        graph: graph,
        formatter: function (series, x, y) {
            var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
            var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
            var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
            return content;
        }
    });

</script>

<!-- Today Activity -->
<script>
    // set up our data series with 50 random data points

    var seriesData = [[], [], []];
    var random = new Rickshaw.Fixtures.RandomData(20);

    for (var i = 0; i < 50; i++) {
        random.addData(seriesData);
    }

    // instantiate our graph!

    var graph = new Rickshaw.Graph({
        element: document.getElementById("rickshaw-bars"),
        renderer: 'bar',
        series: [
            {
                color: "#303f9f",
                data: seriesData[0],
                name: 'Job'
            }, {
                color: "#ef4836",
                data: seriesData[1],
                name: 'Feed'
            }
        ]
    });

    graph.render();

    var hoverDetail = new Rickshaw.Graph.HoverDetail({
        graph: graph,
        formatter: function (series, x, y) {
            var date = '<span class="date">' + new Date(x * 1000).toUTCString() + '</span>';
            var swatch = '<span class="detail_swatch" style="background-color: ' + series.color + '"></span>';
            var content = swatch + series.name + ": " + parseInt(y) + '<br>' + date;
            return content;
        }
    });
</script>

<script>
    var options = {
        scaleColor: false,
        trackColor: 'rgba(255, 255, 255, 0.5)',
        barColor: '#fff',
        lineWidth: 8,
        lineCap: 'butt',
    };
</script>
<script src="assets/js/lib/jquery.min.js"></script><!-- jquery vendor -->
<script src="assets/js/lib/jquery.nanoscroller.min.js"></script><!-- nano scroller -->
<script src="assets/js/lib/sidebar.js"></script><!-- sidebar -->
<script src="assets/js/lib/bootstrap.min.js"></script><!-- bootstrap -->
<script src="assets/js/lib/mmc-common.js"></script>
<script src="assets/js/lib/mmc-chat.js"></script>

<script src="assets/js/lib/calendar-2/moment.latest.min.js"></script><!-- scripit init-->
<script src="assets/js/lib/calendar-2/semantic.ui.min.js"></script><!-- scripit init-->
<script src="assets/js/lib/calendar-2/prism.min.js"></script><!-- scripit init-->
<script src="assets/js/lib/calendar-2/pignose.calendar.min.js"></script><!-- scripit init-->
<script src="assets/js/lib/calendar-2/pignose.init.js"></script><!-- scripit init-->
<script src="assets/js/scripts.js"></script><!-- scripit init-->

</body>
</html>